const dragBox = document.createElement("div");
dragBox.style.position = "fixed";
dragBox.style.width = "100px";
dragBox.style.height = "100px";
dragBox.style.boxSizing = "border-box";
dragBox.style.border = "1px dashed red";
dragBox.style.display = "none";

export function mouseDownHandler(
  e: React.MouseEvent,
  type: string,
  callBack: Function
) {
  const layer = document.getElementById("svg");
  if (layer) {
    const { x, y, width, height } = layer.getBoundingClientRect();
    document.body.appendChild(dragBox);
    document.onmousemove = (e: MouseEvent) => {
      dragBox.style.left = e.clientX - 50 + "px";
      dragBox.style.top = e.clientY - 50 + "px";

      if (
        e.clientX >= x &&
        e.clientX <= x + width &&
        e.clientY >= y &&
        e.clientY <= y + height
      ) {
        dragBox.style.display = "block";
      } else {
        dragBox.style.display = "none";
      }
    };
    document.onmouseup = (e) => {
      document.body.removeChild(dragBox);
      callBack({ x: e.clientX - x - 50, y: e.clientY - y - 50, type });
      document.onmousemove = null;
      document.onmouseup = null;
    };
  }
}
